@charset "utf-8";

@import "compass/reset";
@import "compass/css3";
@import "compass/layout";
@import "compass/utilities/tables";

/*  */
	body {
		font-family: '微软雅黑';
	}

	.biui {

	}

	.biui-table {
		margin: 30px;
		font-family: '微软雅黑';
		.head-title {
			background: #fafbfc;
			width: 100%;
			height: 42px; 
			color: #464646;
			line-height: 42px;
			border:1px solid #e6e6e6;
			border-radius: 2px;
			padding: 0 0 0 20px;
			.tools { 
				float: right;
				padding: 0 10px;
				cursor: pointer;
				text-align: center;
				border-left: 1px solid #e6e6e6;
				label {
					margin: 0 10px 0 0;
				}
				.click-btn {
					color: #258ae1;
				}
			}
		}

		.bitable {
			$table-color: #ffffff;
			@include table-scaffolding;
			@include inner-table-borders(1px, #e6e6e6);
			@include outer-table-borders(1px, #e6e6e6);
			/*@include alternating-rows-and-columns($table-color, #e6e6e6);*/

			width: 100%;
			font-size: 12px;
			border-radius: 2px;
			/*
			
			*/
			thead tr {
				height: 38px;
				color: #909090;
				background: #fafbfc; 
			}
			tbody tr {
				background: #fff;
				height: 38px;
				td {
					text-align: center;
					color: #464646;
				}
				&:hover {
					background: #fafbfc;
				}
				&.drill-table {
					background-color: #FAFBFC;
					td {color: #bbb;}
				}
			}

			.add-icon {
				cursor: pointer;
				position: relative;
			    display: inline-block;
			    background: #707070;
			    width: 10px;
			    height: 2px;
			    float: left;
			    top: -3px;
	    		left: 15px;
	    		&.on {
	    			top:6px;
	    			background: #258ae1;
	    			&:before {
						position: relative;
						top: -4px;
						content: '';
					    display: inline-block;
					    background: #258ae1;
					    width: 2px;
					    height: 10px;
				    }
	    		}
			    
			}
		}

		.page-set {
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			margin: 20px 0;
			color: #464646;
			.rol {
				height: 100%;
				padding: 0 15px;
				border: 1px solid #e6e6e6;
				border-radius: 2px;
				background: #fff;
				margin: 0 10px;
				@include inline-block;

			}
			.page-num {
				li {
					@include inline-block;
					border: 1px solid #e6e6e6;
					height: 100%;
					padding: 0 10px;	
					border: 1px solid #e6e6e6;
					border-radius: 2px;
					background: #fff;
					margin: 0 0 0 5px;
					&.active {
						background: #258ae1;
						border: 1px solid #258ae1;
						a {
							color: #fff;
						}
					}
				}

			}
		}
	}

	.biui-content {
		.head-main {
			position: relative;
			padding: 1px 15px;
			margin: 10px 0 0;
			height:40px;
			line-height: 40px;
			font-weight: bold;
			background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fafafa), to(#ebebeb));
			background-image: -webkit-linear-gradient(top, #fafafa, 0%, #ebebeb, 100%);
			background-image: -moz-linear-gradient(top, #fafafa 0%, #ebebeb 100%);
			background-image: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%);
			background-repeat: repeat-x;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffebebeb', GradientType=0);
			border: 1px solid #D5D5D5;
			border-top-right-radius: 4px;
			border-top-left-radius: 4px;
			-webkit-background-clip: padding-box;
			&:before, &:after {
				content: " ";
				display: table;
			}
		}

		.head-title {
			background: #fafbfc;
			width: 100%;
			height: 42px; 
			color: #464646;
			line-height: 42px;
			border:1px solid #e6e6e6;
			border-radius: 2px;
			padding: 0 0 0 20px;
			.tools { 
				float: right;
				width: 100px;
				cursor: pointer;
				text-align: center;
				border-left: 1px solid #e6e6e6;
			}
		}

		.content {
			background: #fafbfc;
			border:1px solid #e6e6e6;
			border-radius: 2px;
			width: 100%;
			height:auto;
			padding: 20px;
		}

		.foot-btn {
			text-align: center;
			margin: 20px;
			.submit-btn  {
				width: 130px;
				height: 40px;
				background: #258ae1;
				border: 1px solid #258ae1;
				border-radius: 2px;
				color:  #ffffff;
				@include inline-block;
			}
		}
	}

	
	.biui-add-btn {
		@include inline-block;
		width: 200px;
		height: 55px;
		line-height: 55px;
		background: #fff;
		text-align: center;
		font-size: 14px;
		border: 1px solid #e6e6e6;
		border-radius: 2px;
		margin: 0 auto;
		cursor: pointer;
		.icon {
		    position: relative;
		    display: inline-block;
		    background: #707070;
		    width: 16px;
		    height: 2px;
		    top: 9px;
    		left: -20px;
		    &:before {
				position: relative;
				top: -6px;
				content: '';
			    display: inline-block;
			    background: #707070;
			    width: 2px;
			    height: 16px;
		    }
		}
		&.active {
			border-color: #258ae1;
			color: #258ae1;
			.icon {background: #258ae1; &:before {background: #258ae1;}}
		}
	}

	.biui-checkbox-btn {
		@extend .biui-add-btn;
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		background: #fff;
	}

	.biui-select-box {
		background: #fff;
		margin-top: 20px;
		position: relative;
		padding: 20px;
		border: 1px solid #e6e6e6;
		.arrow {
			position: absolute;
		    color: #fff;
		    text-shadow: 0px -1px 1px #bbb;
		    top: -14px;
		}
	}

	.biui-form {
		width: 100%;
		margin: 0;
		line-height: 30px;
		color: #464646;
		td.topic {
			width: 1%;
			text-align: right;
			padding: 0px;
		}
		td.context {
			.text-head {
				min-width: 120px;
				@include inline-block;
				text-align: right;
			}
			.text-body {
				@include inline-block;
			}
			width: 100%;
			padding: 5px;
			input[type="checkbox"]  {
				top: 5px;
   				position: relative;
			}
		}
	}

	.biui-inline-block {
		@include inline-block;
	}

	.biui-target-tab {
		.tab-header {
			.tab-option {
				height:40px;
				padding: 0 20px;
				line-height: 40px;
				border-bottom: 1px solid #f7f7f7;
				color: #909090;
				margin-right: 40px;
				text-align: center;
				cursor: pointer;
				@include inline-block;
				&.active {
					border-bottom: 2px solid #258ae1;
					color: #258ae1;
				}
			}
		}

		.tab-context {
			padding: 10px;
			line-height: 30px;
			.text {
				min-width: 200px;
				input[type="checkbox"] {
					height:23px;
				}
			}
		}
	}

/*}*/